.list-style() {
    > img {
        width: 100%;
    }
    ul {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        margin: 0;
        padding: 0;
        li {
            text-align: center;
            margin: 5px;
            width: calc(~"50% - 10px");
            box-shadow: 0 0 5px #ccc;
            padding: 0 10px;
            img {
                width: 100%;
                display: block;
            }
            .name {
                line-height: 18px;
                color: #8f8f94;
                text-align: center;
            }
            .pro-price {
                color: #f30;
                font-size: 12px;
                
            }
            .pro-old-price {
                color:#ccc;
                font-size: 12px;
                text-decoration: line-through;
            }
        }
    }
}
.mui-content {
    background-color: white
}
.my-nav {
    display: flex;
    flex-wrap: wrap;
    a {
        width: calc(100% / 3);
        img {
            width: 100%;
            display: block;
        }
    }
}

.brand {
    padding: 5px;
    > img {
        width: 100%;
        display: block;
    }
    ul {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        margin: 0%;
        padding: 0;
        li {
            width: 25%;
            img {
                width: 100%;
                display: block;
            }
        }
    }
}

.sports {
    > img {
        width: 100%;
    }
    ul {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        margin: 0;
        padding: 0;
        li {
            text-align: center;
            margin: 5px;
            width: calc(~"50% - 10px");
            box-shadow: 0 0 5px #ccc;
            padding: 0 10px;
            img {
                width: 100%;
                display: block;
            }
            .name {
                line-height: 18px;
                color: #8f8f94;
                text-align: center;
            }
            .pro-price {
                color: #f30;
                font-size: 12px;
                
            }
            .pro-old-price {
                color:#ccc;
                font-size: 12px;
                text-decoration: line-through;
            }
        }
    }
}
.female {
    text-align: center;
    .list-style()
}
.male {
    .list-style()
}
